<template>
    <div  class="inner-swiper">
     
          <!-- <div class="item-swiper"></div>
          <div class="item-swiper"></div>
          <div class="item-swiper"></div>
          <div class="item-swiper"></div>
          <div class="item-swiper"></div> -->
      <!-- swiper -->
       <swiper :options="swiperOption" ref="swiperList" @slideChange="slideChange">
        <swiper-slide>
          <div class="item-swiper one">
              0
          </div>
        </swiper-slide>
        <swiper-slide>
          <div class="item-swiper">
              1
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper">
              2
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper">
              3
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper five">
              4
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper six">
              5
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper">
             6
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper">
             7
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper">
              8
          </div>
          </swiper-slide>
        <swiper-slide>
          <div class="item-swiper ten">
              9
          </div>
          </swiper-slide>
      </swiper>
    </div>
</template>

<script>
 export default {
    name: "MySwiperList", 
    data() {
      return {
        swiperOption: {
          slidesPerView: 5,
          spaceBetween: 0,
          
          loop:true,
          pagination: {
            el: '.swiper-pagination',
            clickable: true
          }
        }
    }
  },
  mounted(){
    this.slideChange()
  },
  methods:{
    slideChange(){
        console.log(this.$refs.swiperList.swiper.activeIndex);//这里的5就是指0,只不过数量0-10了，所以变成了5
        // 通过class标签查找器
      let allSwiper = document.getElementsByClassName("item-swiper")
    //   类数组 转成 数组
      allSwiper = Array.from(allSwiper)
      allSwiper.forEach((item,k)=>{
        //   0 1 2 3 4 5 6 7 8 9 ...
        
        if(k == (this.$refs.swiperList.swiper.activeIndex)+2){
          item.style.transform = "scale(1.5)"
        }
        
        if((k == (this.$refs.swiperList.swiper.activeIndex)+1)||(k == (this.$refs.swiperList.swiper.activeIndex)+3)){
          item.style.transform = "scale(1)"
        }
        // 0 0 4
        if(k == (this.$refs.swiperList.swiper.activeIndex)||k == (this.$refs.swiperList.swiper.activeIndex)+4){
          item.style.transform = "scale(0.75)"
        }
      })
    }
  }
 }
</script>

<style lang="less" scoped>
.inner-swiper{
    // width: 100%;
    // height:1.5rem;
    // display: flex;
    .swiper-slide{
      height: 2.0rem;
    }
  .item-swiper{
    margin-left: 0.3rem;
    margin-top: 0.6rem;
    text-align: center;
    width: 1rem;
    height: 1rem;
    line-height: 1rem;
    border: 1px solid black;
    border-radius: 80%;
    transition: all 1s;
    // scale: 0.83;
  }
  // .one,.six{
  //   margin-left: 0.7rem;
  // }
  // .five,.ten{
  //   margin-left: -0.1rem;
  // }

}
  
</style>